import './style.css'
import typescriptLogo from './typescript.svg'
import { setupCounter } from './counter'

console.log('import.meta__', import.meta)
console.log('import.meta.env__', import.meta.env, import.meta.env.MODE)  // npm run build可以查看生成什么样子  import.meta.env.MODE 会变成变量进行替换，我们可以自定义env变量(环境变量) 生成  .env文件即可 (同时所以自定义的变量需要加上vite前缀如：VITE_TITLE)

console.log('自定义环境变量___', import.meta.env.VITE_TITLE);

const x = import.meta.env.VITE_TITLE;

// 通过修改 package.json 中的 dev指令，可以让 vite 项目以不同的环境运行，新建 .env.test，打开package.json
console.log('通过指定mode来指定 环境变量的文件————', import.meta.env.VITE_testMode, typeof import.meta.env.VITE_testMode);
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://www.typescriptlang.org/" target="_blank">
      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
    </a>
    <h1>Vite + TypeScript</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite and TypeScript logos to learn more
    </p>
  </div>
`

setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
